import * as React from 'react'
import { observable } from 'mobx'
import { observer, inject } from 'mobx-react'
import {Link} from "react-router-dom"
import FN from '../tools/fn'
import Server from "../../service/app"
import LazyLoad from 'react-lazyload';
import InfiniteScroll from 'react-infinite-scroller';
import { forceCheck } from 'react-lazyload';
import ItemLoading from "../../components/listLoading"

@inject('chat')
@observer
export default class List extends React.Component {
    @observable page = 0;
    @observable list = [];
    @observable hasMore=true;
  constructor(props) {
    super(props)
    this.store = this.props.chat
    //this.renderItem=this.renderItem.bind(this);
  }
  async componentDidMount(){
    // page Number 页数
    // tab String 主题分类。目前有 ask share job good
    // limit Number 每一页的主题数量
    // mdrender String 当为 false 时，不渲染。默认为 true，渲染出现的所有 markdown 格式文本。
   
  }
  async loadFunc(){
    forceCheck();
    if(!this.hasMore){
        return false;
    }
    this.page++;
    let data=await Server.getTopics({page:this.page,limit:5});
    if(data.length<20){
        this.hasMore=false;
    }
    this.list=[...this.list,...data.data]

  }
  PlaceholderComponent(){
      return(
          <img src={require("../../assets/imgLoading.gif")}/>
      )
  }
  itemComponent(){
    //   return 和(不能换行
      return  this.list.map((item,i)=>{

                    return(
                            <div className="am-list-item" key={item.id}>
                                <div className="am-list-thumb">
                                   <LazyLoad height={66}  offset={100}    once placeholder={this.PlaceholderComponent()}>
                                      <img src={item.author.avatar_url} /> 
                                   </LazyLoad>
                                </div>
                                <div className="am-list-content">
                                    <div className="am-list-title">{item.title}</div>
                                    <div className="am-list-brief">
                                            <p>作者: {item.author.loginname}</p>
                                            <p>时间：{item.create_at}</p>
                                    </div>
                                </div>
                            </div>
                      );
           })
  }
  render() {
    return (
        <div className="scrollFixed">
            <InfiniteScroll
                pageStart={0}
                loadMore={this.loadFunc.bind(this)}
                hasMore={this.hasMore}
                loader={<ItemLoading key={-1}/>}
                useWindow={false}
            >
                <div className="am-list am-list-ptext">
                            <div className="am-list-body">
                                { this.itemComponent() }
                            </div>
                </div>
            </InfiniteScroll>
           
        </div>                
    )
  }
}
